<template>
  <div class="main">
    <div class="box">
      <el-steps direction="vertical" :space="200" :active="active" finish-status="success">
        <el-step title="验证注册邮箱"></el-step>
        <el-step title="重新填写密码"></el-step>
        <el-step title="成功修改密码"></el-step>
      </el-steps>
    </div>
    <div class="card">
      <el-form :model="form" :rules="rules" status-icon ref="form">
        <el-form-item prop="password" >
          <el-input v-model="form.password" placeholder="8～20位字母、数字或特殊符号"
                    prefix-icon="el-icon-s-goods" size="large" show-password></el-input>
        </el-form-item>
        <el-form-item prop="password2" >
          <el-input v-model="form.password2" placeholder="请重复输入密码"
                    prefix-icon="el-icon-s-goods" size="large" show-password></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="button">
      <el-button style="margin-top: 12px;" @click="next('form')">{{content}}</el-button>
    </div>
  </div>



</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  name: "NewPassword",
  beforeDestroy() {
    localStorage.removeItem('email')
  },
  data() {
    const passwordCheck = (rule, value, callback) => {
      if(value === ''){
        callback(new Error('请输入密码'))
      } else {
        const reg = /^[^\s]*$/
        if (!reg.test(value)) {
          callback(new Error('密码中不能包含空格'))
        } else {
          callback()
        }
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.form.password2 !== '') {
          this.$refs.form.validateField('checkPass');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      active: 1,
      content: '下一步',
      form: {
        password: '',
        password2: '',
      },
      rules: {
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {validator: validatePass, trigger: 'blur'},
          {validator: passwordCheck, trigger: 'blur'},
          {min: 8, max: 20, message: '请输入8-20位密码', trigger: 'blur'}
        ],
        password2: [
          {required: true, message: '请重复输入密码', trigger: 'blur'},
          {validator: validatePass2, trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    next(form){
      this.$refs[form].validate((valid) => {
        if (valid) {
          const data = {
            email: localStorage.getItem('email'),
            password1: this.form.password,
            password2: this.form.password2
          }

          axios.post('/api/retrieve/reset', qs.stringify(data)).then((res) => {
            if (res.data.code !== 0) {
              this.$notify.error(res.data.msg)
            } else {
              this.$router.push('/retrieve/return_login')
            }
          })

        }
      })

    },
  }
}
</script>

<style scoped>
.box {
  height: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 450px;
  margin: auto;
}

.button {
  height: 500px;
  position: absolute;
  top: 600px;
  right: 600px;
  margin: auto;
}

.card {
  position: absolute;
  top: 400px;
  bottom: 0;
  left: 750px;
  margin: auto;
}

.el-input__inner{   /*或者 .s2>>>.el-input__inner  */
  /*background:rgba(0,0,0,0.2);    !*调整inner的背景色，透明*!*/
  border-radius: 50px;    /*输入框圆角值*/
  width: 500px;
}

.main {
  position: fixed;
  width: 100%;
  height: 100%;

  background-image: url('../img/bgi1.png');
  background-repeat: no-repeat;
  background-size: cover;
}
</style>